const RANGE = 10; // 多少距离吸上去
let graphics = document.getElementsByClassName('graphics'); // 所有图形
let form = document.getElementsByClassName('form'); // 表单
// 拖拽与删除函数
function mobile() {
    // 选中新产生的盒子
    for (let i = 1; i < graphics.length; i++) {
        // 拖拽
        graphics[i].onmousedown = function (e) {
            // 拖拽时虚线边
            for (let j = 1; j < graphics.length; j++) {
                graphics[j].style.border = '1px solid';
            }
            this.style.border = '5px dashed ';
            // 鼠标与盒子的偏差
            let deviationX = e.clientX - this.offsetLeft;
            let deviationY = e.clientY - this.offsetTop;
            document.onmousemove = function (e) {
                // 移动后的盒子的位置
                let lux = e.clientX - deviationX; //左上x
                let luy = e.clientY - deviationY; //左上y

                // 磁性吸附部分
                // 上u 下d 左l 右r
                let rux = lux + graphics[i].offsetWidth; //右上x
                let ruy = luy; //右上y
                let ldx = lux; //左下x
                let ldy = luy - graphics[i].offsetHeight; //左下y
                let rdx = rux; //右下x
                let rdy = ldy; //右下y
                for (let k = 1; k < graphics.length; k++) {
                    // 所有图形的左上角
                    let klux = graphics[k].offsetLeft; //左上x
                    let kluy = graphics[k].offsetTop; //左上y
                    let krux = klux + graphics[i].offsetWidth; //右上x
                    let kruy = kluy; //右上y
                    let kldx = klux; //左下x
                    let kldy = kluy - graphics[i].offsetHeight; //左下y
                    let krdx = krux; //右下x
                    let krdy = kldy; //右下y
                    //左吸右,右上<吸的左上 且 右上在吸得50內 且在同一垂直线上,就让左上等于吸得左上减去自己的宽
                    if (rux < klux + RANGE && rux > klux - RANGE && ldy < kluy && luy > kldy) {
                        lux = klux - graphics[i].offsetWidth;
                    }
                    //右吸左,左上>吸的右上 且 左上在吸的50內 且在同一垂直线上,就让左上等于吸得右上
                    if (lux > krux - RANGE && lux < krux + RANGE && ldy < kluy && luy > kldy) {
                        lux = krux;
                    }
                    //下吸上
                    if (luy < krdy + RANGE && luy > krdy - RANGE && rdx > klux && ldx < krux) {
                        luy = krdy;
                    }
                    //上吸下
                    if (ldy > kluy - RANGE && ldy < kluy + RANGE && rdx > klux && ldx < krux) {
                        luy = kluy + graphics[i].offsetHeight;
                    }
                }
                // 定位给盒子定位
                graphics[i].style.left = lux + 'px';
                graphics[i].style.top = luy + 'px';
            };

            // 清楚拖拽
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
        // 右键删除
        let menu = document.getElementById('menu'); // 右键菜单
        let del = document.getElementById('delete'); // 删除键
        let up = document.getElementById('up'); // 上移
        let down = document.getElementById('down'); // 下移
        let left45 = document.getElementById('left45'); // 左45
        let right45 = document.getElementById('right45'); // 左45

        graphics[i].oncontextmenu = function (e) {
            // 鼠标点的坐标;
            let oX = e.clientX;
            let oY = e.clientY;
            // 不让它进墙里去
            let winWidth = window.innerWidth;
            let winHeight = window.innerHeight;
            let cmWidth = menu.offsetWidth;
            let cmHeight = menu.offsetHeight;
            oX = oX > winWidth - cmWidth ? winWidth - cmWidth : oX;
            oY = oY > winHeight - cmHeight ? winHeight - cmHeight : oY;
            // 菜单出现后的位置
            menu.style.visibility = 'visible';
            menu.style.left = oX + 'px';
            menu.style.top = oY + 'px';
            // 点外面清除菜单
            document.onclick = function (e) {
                menu.style.visibility = 'hidden';
            };
            // 左45
            left45.onclick = function () {
                // 这里绕一个大圈主要是,把css值转换成数字,直接加的话是字符串相加,然后它又不能直接转换,以下同理
                let r1 = graphics[i].style.rotate;
                let r2 = parseInt(r1) - 45;
                graphics[i].style.rotate = r2 + 'deg';
            };
            right45.onclick = function () {
                let r1 = graphics[i].style.rotate;
                let r2 = parseInt(r1) + 45;
                graphics[i].style.rotate = r2 + 'deg';
            };
            // 上移
            up.onclick = function () {
                let zi1 = graphics[i].style.zIndex;
                let zi2 = parseInt(zi1) + 1;
                graphics[i].style.zIndex = zi2;
            };
            // 下移
            down.onclick = function () {
                graphics[i].style.zIndex -= 1;
            };
            // 删除
            del.onclick = function () {
                generate.removeChild(graphics[i]);
                // 这里要再调用一遍，就是从新获取一遍,使数组序列正常
                mobile();
            };

            return false; // 阻止右键弹窗
        };
    }
}

/* 获取表单生成的盒子，复制一份，加到生成盒子里 */
// 生成盒子
let but = document.getElementsByName('copy'); // 生成按钮
let generate = document.querySelector('.generate'); // 生成区域
for (let i = 0; i < but.length; i++) {
    but[i].onclick = function () {
        // 复制
        cloneNode = graphics[i].cloneNode(true);
        // 加到生成盒子里
        generate.appendChild(cloneNode);
        mobile();
    };
}

// 根据表单改变盒子
form[0].addEventListener('change', () => {
    let bgColor = document.getElementsByName('bgColor')[0].value; // 背景颜色
    let sizeW = document.getElementsByName('sizeW')[0].value; // 宽
    let sizeH = document.getElementsByName('sizeH')[0].value; // 高
    let unitW = document.getElementsByName('unitW')[0].value; // 宽单位
    let unitH = document.getElementsByName('unitH')[0].value; // 高单位
    let angle = document.getElementsByName('angle')[0].value; // 角度
    let order = document.getElementsByName('order')[0].value; // 级别

    let shape = document.getElementsByName('shape')[0].value; // 形状
    if (shape == 'square') {
        graphics[0].classList.add('square');
        graphics[0].classList.remove('triangle');
        graphics[0].classList.remove('parallelogram');
    }
    if (shape == 'triangle') {
        graphics[0].classList.add('triangle');
        graphics[0].classList.remove('square');
        graphics[0].classList.remove('parallelogram');
    }
    if (shape == 'parallelogram') {
        graphics[0].classList.add('parallelogram');
        graphics[0].classList.remove('square');
        graphics[0].classList.remove('triangle');
    }

    graphics[0].style.background = bgColor;
    graphics[0].style.width = sizeW + unitW;
    graphics[0].style.height = sizeH + unitH;
    graphics[0].style.rotate = angle + 'deg';
    graphics[0].style.zIndex = order;
    console.log(bgColor);
});
